<script setup>
import { setRootFontSize } from '@/utils/rem.js'
import { onMounted, ref, watch } from "vue";
import Header from "./header.vue";
import Left from "./left.vue";
import Right from "./right.vue";
import Main from "./main.vue";
import mainStore from '@/store'

const rootFontSize = ref(16)
const store = mainStore()

onMounted(() => {
  rootFontSize.value = toFixed(setRootFontSize())
})

watch(() => store.type, val => {
  console.log('监听适配方式的变化：', val)
  localStorage.setItem('type', val)
  rootFontSize.value = toFixed(setRootFontSize())
})

window.addEventListener("resize", () => {
  rootFontSize.value = toFixed(setRootFontSize())
});

//  保留四位小数
function toFixed(num) {
  return parseFloat(num.toFixed(4))
}

</script>

<template>
  <div class="layout">
    <Header />
    <div class="content">
      <Left :type="store.type" :rootFontSize="rootFontSize" />
      <Main />
      <Right />
    </div>

    <div class="value">
      字体大小：{{ rootFontSize }}px
    </div>

    <div class="type">
      <div>
        <input id="type-1" v-model="store.type" type="radio" name="type-1" value="height" />
        <label for="type-1">以高度适配</label>
      </div>

      <div>
        <input id="type-2" v-model="store.type" type="radio" name="type-2" value="width" />
        <label for="type-2">以宽度适配</label>
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout {
  width: 100%;
  height: 100%;
  position: relative;
}

.layout .content {
  display: flex;
  width: 100%;
  height: calc(100% - 5rem);
  position: relative;
}

.layout .value {
  position: fixed;
  top: 1rem;
  left: 50%;
  font-size: 1rem;
  transform: translateX(-50%);
}

.layout .type {
  position: fixed;
  top: 2px;
  left: 10rem;
}

.layout .type input {
  width: 1rem;
  height: 1rem;
}
</style>
